import React, { useEffect, useState, useRef } from 'react'
import { NavBar, Tabs, Skeleton, DotLoading, SpinLoading, Mask, PullToRefresh } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { PullStatus } from 'antd-mobile/es/components/pull-to-refresh'
import { useNavigate } from 'react-router-dom'
import { GoodStuffWrapper } from './style'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import LazyLoad from 'react-lazyload'
import {
    getGoodStuffTabsData,
    getGoodStuffListData,
    changeIsShowImage,
    changeImageShowList,
    changeImageDefaultIndex
} from '@/store/actionCreators/goodStuff'
import { getdataCount, gainImages } from '@/api/utils'
import { useInViewport } from 'ahooks'
import ShowImage from '@/components/ShowImage'

interface GoodStuffProps {
    getGoodStuffTabsData: () => void,
    getGoodStuffListData: (page: number, key:string, date: number,getMore?:boolean) => void,
    changeIsShowImage: (is: boolean) => void,
    changeImageShowList: (list: any[]) => void,
    changeImageDefaultIndex: (index: string) => void,
    goodStuffTabs: any[],
    goodStuffList: any[],
    isShowImage: boolean,
    loading: boolean,
    hasMore: boolean
}

const GoodStuff: React.FC<GoodStuffProps> = (props) => {
    const { 
        goodStuffTabs,
        goodStuffList,
        isShowImage,
        loading,
        hasMore
    } = props
    const { 
        getGoodStuffTabsData,
        getGoodStuffListData,
        changeIsShowImage,
        changeImageShowList,
        changeImageDefaultIndex
    } = props
    const [page, setPage] = useState(1)
    const [key, setKey] = useState('1')
    const navigate = useNavigate()
    const target: any = useRef(null)
    // 判断视口是否需要加载
    const [inViewport, ratio] = useInViewport(
        target,
    )
    const statusRecord: Record<PullStatus, string> = {
        pulling: '用力拉',
        canRelease: '松开即可刷新',
        refreshing: '玩命加载中...',
        complete: '刷新成功',
    }
    const dispatchImage = (e: any) => {
        let imageList = JSON.parse(e.target.dataset.images)
        let images = gainImages(imageList)
        let index = e.target.dataset.index
        changeImageShowList(images)
        changeImageDefaultIndex(index)
        changeIsShowImage(true)
    }
    
    useEffect(() => {
        if (!goodStuffTabs.length) {
            getGoodStuffTabsData()
        }
    }, [])
    useEffect(() => {
        getGoodStuffListData(page, key, Date.now(), false)
        console.log(Date.now());
    }, [key])
    // useEffect(() => {
    //     if (inViewport && goodStuffList.length >= page*10) {
    //         getGoodStuffListData(page+1, key, Date.now(), true)
    //         setPage(page+1)
    //     }
    // }, [inViewport])
    return (
        <GoodStuffWrapper>
            <PullToRefresh
                onRefresh={async () => {
                    await sleep(1000)
                    // key不改变 1
                    getGoodStuffListData(1, key, Date.now(), false)
                }}
                renderText={status => {
                    return <div>{statusRecord[status]}</div>
                }}
            >
            {goodStuffList &&
                goodStuffList.map(item => {
                    return (
                        <div className="card" key={item.itemIndex}>
                            <div className="card-header">
                                <div className="photo" style={{ backgroundImage: `url(${item.userVO.user.img})` }}></div>
                                <div className="message">
                                    <p>{item.userVO.user.nickName}</p>
                                    <span>{getdataCount(item.article.createTime)}</span>
                                </div>
                            </div>
                            <div className="imglist">
                                {item.article.content.imgs.slice(0, 3).map((i: any, index: number, imagearr: []) => (
                                    <div
                                        key={index}
                                        style={{display:"inline-block"}}
                                        onClick={(e) => dispatchImage(e)}
                                    >
                                        <LazyLoad 
                                            placeholder={
                                                <Skeleton animated
                                                style={{ height: '108px', width: '108px' }} />
                                            }
                                        >
                                        <img 
                                        src={i.smallUrl} 
                                        data-images={ JSON.stringify(imagearr) } 
                                        data-index={index} 
                                          alt="" />
                                        </LazyLoad>
                                    </div>
                                ))}
                            </div>
                            {item?.article?.content?.texts[0]?.data?.html ?
                                <div 
                                className="description" 
                                dangerouslySetInnerHTML={{__html:`${item?.article?.content?.texts[0]?.data?.html}`}} 
                                /> :
                                <div className="description"> {item?.article?.content?.texts[0]?.data} </div>
                            }
                            
                            {item.article.content.products[0] && 
                            <div className="product">
                                <img src={item.article.content.products[0].thumb} alt="" />
                                <div className="desc">
                                    <h2>{item.article.content.products[0].title}</h2>
                                    <div className="price">
                                        <span>￥</span>
                                        <span>{item.article.content.products[0].price}</span>
                                        <span>起</span>
                                    </div>
                                </div>
                                <i className='iconfont icon-xiangyou3fill'></i>
                            </div>}
                            <div className="card-footer">
                                <div className="read-count">{item.nums.browseCount}阅读</div>
                                <div className="icon-btn">
                                    <div>
                                        <i className='iconfont icon-zan'></i>
                                        <span>{item.nums.favCount|| 0}</span>
                                    </div>
                                    <div>
                                        <i className='iconfont icon-shoucang2'></i>
                                        <span>收藏</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })
            }
            </PullToRefresh>
            {/* {
                goodStuffList &&
                (hasMore ? 
                <div 
                    className='downloading'
                    ref={target}
                >
                    <span>加载中<DotLoading /></span>
                </div>  
                :<div 
                    className='downloading'
                >
                    <span>没有更多了~</span>
                </div> 
                )
            } */}
            {/* {isShowImage && <ShowImage />} */}
        </GoodStuffWrapper>
    )
}

const mapStateToProps=(state:rootState)=>({
  goodStuffTabs: state.goodStuff.goodStuffTabs,
  goodStuffList: state.goodStuff.goodStuffList,
  isShowImage: state.goodStuff.isShowImage,
  loading: state.goodStuff.loading,
  hasMore: state.goodStuff.hasMore
})


export default connect(mapStateToProps,
    {
        getGoodStuffTabsData,
        getGoodStuffListData,
        changeIsShowImage,
        changeImageShowList,
        changeImageDefaultIndex
    }
)(GoodStuff)